<template>
  <div>
    <el-card shadow="never" class="aui-card--fill">
      <!-- <el-collapse-transition>
        <el-form v-if="searchShow" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
          <el-form-item v-if="false">
            <el-input v-model="dataForm.name" :placeholder="$t('sysruledata.name')" clearable></el-input>
          </el-form-item>
          <el-form-item field="ruleSort">
            <el-select v-model="dataForm.ruleSort" :placeholder="$t('sysruledata.ruleSort')" clearable>
              <el-option v-for="ruleSort in ruleSortList" :key="ruleSort.value" :label="ruleSort.name" :value="ruleSort.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()" type="primary">{{ $t('query') }}</el-button>
            <el-button @click="searchReset()">{{ $t('reset') }}</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-transition> -->
      <vxe-toolbar :setting="{immediate:true}">
        <template v-slot:buttons>
          <el-button v-if="$hasPermission('sys:sysruledata:save')" type="primary" @click="addOrUpdateHandle()">{{
            $t('add') }}
          </el-button>
          <el-button v-if="$hasPermission('sys:sysruledata:delete')" type="danger" @click="deleteHandle()">{{
            $t('deleteBatch') }}
          </el-button>
        </template>
        <template v-slot:tools>
          <!-- <el-button icon="el-icon-search" @click="searchShowHandle()" circle></el-button> -->
          <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
          <el-button icon="el-icon-download" @click="$refs.xTable.openExport()" circle></el-button>
        </template>
      </vxe-toolbar>
      <div class="mod-sys__sysruledata}">
        <vxe-table :loading="dataListLoading" :data="dataList" ref="xTable" auto-resize class="vxe-table-element"
          @select-change="dataListSelectionChangeHandleVex" @select-all="dataListSelectionAllChangeHandleVex">
          <vxe-table-column type="checkbox" width="50" align="center"></vxe-table-column>
          <vxe-table-column field="name" title="sysruledata.name"></vxe-table-column>
          <vxe-table-column field="value" title="sysruledata.value" width="100" align="center"></vxe-table-column>
          <vxe-table-column field="ruleSort" title="sysruledata.ruleSort" width="100" align="center">
            <template slot-scope="scope">
              {{ $getDataItem(ruleSortViewList, scope.row.ruleSort, "value").name }}
            </template>
          </vxe-table-column>
          <vxe-table-column field="sort" title="sysruledata.sort" width="80" align="center"></vxe-table-column>
          <vxe-table-column field="remark" title="sysruledata.remark"></vxe-table-column>
          <vxe-table-column title="handle" width="120" align="center">
            <template slot-scope="scope">
              <el-button v-if="$hasPermission('sys:sysruledata:update')" type="text" size="small" icon="el-icon-edit"
                @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}
              </el-button>
              <el-button v-if="$hasPermission('sys:sysruledata:delete')" type="text" size="small" icon="el-icon-delete"
                @click="deleteHandle(scope.row.id)">{{ $t('delete') }}
              </el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"></el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <AddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" :ruleSortList="ruleSortList"></AddOrUpdate>
      </div>
    </el-card>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './ruledata-add-or-update'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/sys/sysruledata/page',
        getDataListIsPage: true,
        deleteURL: '/sys/sysruledata',
        deleteIsBatch: true
      },
      dataForm: {
        name: '',
        ruleSort: ''
      },
      ruleSortList: [],
      ruleSortViewList: []
    }
  },
  components: {
    AddOrUpdate
  },
  created () {
    let params = this.$route.params
    this.dataForm.ruleSort = params.ruleSort
  },
  activated () {
    this.getSort()
    this.getSortView()
  },
  methods: {
    getSort () {
      this.$http.get(`/sys/sysRuleSort/list`, { params: { status: 1 } }).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.ruleSortList = res.data
      }).catch(() => { })
    },
    getSortView () {
      this.$http.get(`/sys/sysRuleSort/list`).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.ruleSortViewList = res.data
      }).catch(() => { })
    }
  }
}
</script>
